<template>
	<view class="">
		<view class="bg-w pd15">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="180rpx">
				<u-form-item label="所属商户" prop="commercialOwnerText" ref="item1" :required="true"
					@click="showCommercial=true">
					<u--input v-model="model1.commercialOwnerText" border="surround" suffixIcon="arrow-down"
						placeholder="请选择所属商户" suffixIconStyle="color: #909399" disabledColor="#fff" disabled></u--input>
				</u-form-item>
				<u-form-item label="单据日期" prop="documentDate" ref="item1" :required="true" @click="showDate=true">
					<u--input v-model="model1.documentDate" border="surround" placeholder="请选择单据日期" disabledColor="#fff" disabled></u--input>
				</u-form-item>
				<u-form-item label="单据编号" prop="documentNumber" :required="true" ref="item1">
					<u--input v-model="model1.documentNumber" border="surround" clearable disabled
						placeholder="请输入单据编号"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="plr15 bg-w mt10" style="padding-bottom: 30rpx;">
			<view class="flex spaceb plt15">
				<view>商品</view>
				<view class="flex">
					<view class="flex alcenter">
						<view class="mr5">
							<u-icon name="scan" size="20" color="#6A6A6A"></u-icon>
						</view>
						<view>扫码</view>
					</view>
					<view class="flex alcenter ml20" @click="$u.route('/pages/basicData/commodity/list')">
						<view class="mr5">
							<u-icon name="list-dot" size="20" color="#6A6A6A"></u-icon>
						</view>
						<view>选择</view>
					</view>
				</view>
			</view>
			<view class="plt15 border-top" v-for="(item,index) in model1.procureOrderFormList" :key="index">
				<view class="flex spaceb">
					<view class="flex alcenter">
						<view class="number">{{index+1}}</view>
						<view class="ml10">{{item.products}}</view>
					</view>
					<view class="flex alcenter" @click="showboxClick(index)">
						<view class="mr10">x{{item.number}}</view>
						<u-icon name="arrow-right" size="16" color="#6A6A6A"></u-icon>
					</view>
				</view>
				<!-- <view class="cl-hui mt5">仓库：正常</view>
				<view class="cl-hui">折扣额：0</view> -->
				<!-- <view class="cl-hui">合计：{{item.purchaseUnitPrice*item.number}}</view> -->
				<view class="flex spaceb mt10">
					<view class="cl-hui">备注：{{item.remarks||''}}</view>
					<view class="" @click="delOrder(index)">
						<u-icon name="trash" size="20" color="#6A6A6A"></u-icon>
					</view>
				</view>
			</view>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="无数据"
				v-if="model1.procureOrderFormList==''" marginTop="50rpx">
			</u-empty>
		</view>
		<view v-if="model1.procureOrderFormList!=''">
			<view class="pd15 mt10 bg-w">
				<span>总条数:{{model1.procureOrderFormList.length}}</span>
				<span class="ml10">总数量:{{totalNum}}</span>
			</view>
			<view class="bg-w pd15 mt10">
				<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="180rpx">
					<u-form-item label="制单人" prop="creatorText" ref="item1" @click="showCreator=true">
						<u--input v-model="model1.creatorText" border="surround" placeholder="请选择制单人" disabledColor="#fff" disabled></u--input>
					</u-form-item>
					<u-form-item label="单据附件" prop="doc_annex" ref="item1">
						<u--input v-model="model1.doc_annex" border="surround" placeholder="请上传单据附件" suffixIcon="attach"
							suffixIconStyle="color: #909399"></u--input>
					</u-form-item>
					<u-form-item label="备注" prop="remarks" ref="item1">
						<u--textarea v-model="model1.remarks" border="surround" placeholder="请输入备注"></u--textarea>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<view class="footer">
			<u-button type="primary" text="编辑" @click="procureOrderEditClick" v-if="model1.id"></u-button>
			<u-button type="primary" text="保存" @click="procureOrderClick" v-else></u-button>
		</view>
		<u-picker :show="showCommercial" :columns="commercial" @confirm="confirmCommercial" @cancel="close"></u-picker>
		<u-picker :show="showCreator" :columns="creator" @confirm="confirmCreator" @cancel="close"></u-picker>
		<u-picker :show="showReview" :columns="reviewStatus" @confirm="confirmReview" @cancel="close"></u-picker>
		<!-- <u-calendar :show="showDate" :mode="mode" :maxDate="maxDate" :defaultDate="defaultDateMultiple"
			@confirm="confirmDate" @close="close"></u-calendar> -->
		<u-datetime-picker :show="showDate" v-model="timeStamp" mode="date" @confirm="confirmDate"
			@close="close"></u-datetime-picker>
		<u-popup :show="showbox" @close="close" @open="open" mode="bottom" :closeable="true">
			<view class="pd15">
				<view class="text-center">单据明细</view>
				<u--form labelPosition="left" :model="detailed" :rules="detailRules" ref="uForm" labelWidth="180rpx">
					<u-form-item label="数量" prop="number" ref="item1" :required="true">
						<u--input v-model="detailed.number" border="surround" placeholder="请输入数量"></u--input>
					</u-form-item>
					<u-form-item label="备注" prop="remarks" ref="item1">
						<u--textarea v-model="detailed.remarks" border="surround" placeholder="请输入备注"></u--textarea>
					</u-form-item>
				</u--form>
				<u-button type="primary" text="保存" @click="confirmProcureOrder"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		data() {
			return {
				model1: {
					commercialOwner: "",
					commercialOwnerText: "",
					creator: "",
					creatorText: "",
					docAnnex: "",
					documentDate: "",
					documentNumber: "",
					id: "",
					procureOrderFormList: [],
					productNumber: "",
					remarks: ''
				},
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'commercial_owner': {
						type: 'string',
						required: true,
						message: '请选择所属商户',
						trigger: ['change']
					},
					'document_date': {
						type: 'string',
						required: true,
						message: '请选择单据日期',
						trigger: ['change']
					},
					'document_number': {
						type: 'string',
						required: true,
						message: '请输入单据编号',
						trigger: ['blur', 'change']
					}
				},
				showCommercial: false,
				commercial: [
					['商户1', '商户12']
				],
				showCreator: false,
				creator: [
					['商户1', '商户12']
				],
				showReview: false,
				reviewStatus: [
					['商户1', '商户12']
				],
				showDate: false,
				mode: 'single',
				minDate: '1970-01-01',
				maxDate: '2100-01-01',
				defaultDateMultiple: `${year}-${month}-${date}`,

				// commercialOwner: "111",
				// creator: "1705220398465671170",
				// documentDate: "2024-07-25 11:50:52",
				// documentNumber: "CGDD-240725-014",
				// procureOrderFormList: [{
				// 	number: "20",
				// 	productNumber: "SP-240716-003",
				// 	products: "衣柜1",
				// 	purchaseUnitPrice: 1000,
				// 	remarks: "",
				// }, {
				// 	number: "10",
				// 	productNumber: "SP-240704-009",
				// 	products: "拖把2",
				// 	purchaseUnitPrice: 20,
				// 	remarks: "",
				// }],
				// productNumber: "SP-240716-003,SP-240704-009",
				timeStamp: Number(new Date()),
				//单据明细
				showbox: false,
				detailed: {
					number: '',
					remarks: ''
				},

				detailRules: {
					'number': {
						type: 'string',
						required: true,
						message: '请输入数量',
						trigger: ['blur', 'change']
					},
				},
				selectIndex: 0,
				procureOrderFormList: []
			}
		},
		computed: {
			// 计算选中商品数量
			totalNum() {
				let totalNum = 0;
				if (this.model1.procureOrderFormList != '') {
					console.log(this.model1.procureOrderFormList)
					this.model1.procureOrderFormList.map(item => {
						totalNum += item.number
					})
					return totalNum
				}
			},
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getDictItemsCommercialOwner()
			this.getDictItemsSysUser()
			this.model1.documentDate = this.$u.timeFormat(this.timeStamp, 'yyyy-mm-dd');
			// console.log(options)
			if (!this.$u.test.isEmpty(options.item)) {
				const item = JSON.parse(decodeURIComponent(options.item));
				console.log(item)
				this.model1 = {
					id: item.id,
					commercialOwner: item.commercialOwner,
					commercialOwnerText: item.commercialOwner_dictText,
					creator: item.creator,
					creatorText: item.creator_dictText,
					docAnnex: item.docAnnex,
					documentDate: item.documentDate,
					documentNumber: item.documentNumber,
					remarks: item.remarks,
					procureOrderFormList: [],
					productNumber: "",
				}
				this.queryProcureOrderFormByMainId(item.id)
			} else {
				this.pur_cgdd_bill_no()
			}
		},
		onShow() {
			if (!this.$u.test.isEmpty(uni.getStorageSync('procureOrderFormList'))) {
				this.model1.procureOrderFormList = uni.getStorageSync('procureOrderFormList');
			}
			// this.isLogin = checkLogin()
			// if (!this.isLogin) {
			// 	this.isloginBind()
			// 	return false
			// }

		},
		onUnload() {
			uni.removeStorageSync('procureOrderFormList')
		},
		methods: {
			queryProcureOrderFormByMainId(id) {
				this.$apis.queryProcureOrderFormByMainId(id).then(res => {
					this.model1.procureOrderFormList = res.result
				})
			},
			//fin_zh_bill_no账户编号
			pur_cgdd_bill_no() {
				this.$apis.pur_cgdd_bill_no().then(res => {
					this.model1.documentNumber = res.result
				})
			},
			getDictItemsCommercialOwner() {
				this.$apis.getDictItemsCommercialOwner().then(res => {
					this.commercial[0] = res.result
					// this.model1.accCode = res.result
				})
			},
			getDictItemsSysUser() {
				this.$apis.getDictItemsSysUser().then(res => {
					this.creator[0] = res.result
				})
			},
			select(e) {
				this.intindex = e
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showCommercial = this.showDate = this.showbox = this.showCreator = false;
				// console.log('close');
			},
			confirmCommercial(e) {
				const {
					value,
					label
				} = e.value[0];
				this.model1.commercialOwner = value;
				this.model1.commercialOwnerText = label;
				this.close();
			},
			confirmCreator(e) {
				const {
					value,
					label
				} = e.value[0];
				this.model1.creator = value;
				this.model1.creatorText = label;
				this.close();
			},
			confirmDate(e) {
				this.model1.documentDate = this.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.close()
			},
			showboxClick(index) {
				this.selectIndex = index
				this.showbox = true
			},
			confirmProcureOrder() {
				const selectedForm = this.model1.procureOrderFormList[this.selectIndex];
				selectedForm.number = Number(this.detailed.number);
				selectedForm.remarks = this.detailed.remarks;
				this.detailed = {
					number: '',
					remarks: ''
				}
				this.close()
			},
			delOrder(index) {
				let that = this
				uni.showModal({
					content: "确认删除吗",
					success(res) {
						if (res.confirm) {
							that.model1.procureOrderFormList.splice(index, 1)
						}
					}
				})
			},
			procureOrderClick() {
				this.model1.productNumber = this.model1.procureOrderFormList.map(item => item.productNumber).join(', ')
				let form = {
					commercialOwner: this.model1.commercialOwner,
					creator: this.model1.creator,
					documentDate: this.model1.documentDate,
					documentNumber: this.model1.documentNumber,
					procureOrderFormList: this.model1.procureOrderFormList,
					productNumber: this.model1.productNumber,
					remarks: this.model1.remarks
				}
				this.$refs.uForm.validate().then(res => {
					this.$apis.procureOrderAdd(form).then(res => {
						if (res.code == 200) {
							this.$u.toast(res.result)
							setTimeout(() => {
								uni.navigateBack()
							}, 1000);
						}
					})
				}).catch(errors => {})
			},
			procureOrderEditClick() {
				this.model1.productNumber = this.model1.procureOrderFormList.map(item => item.productNumber).join(', ')
				let form = {
					id: this.model1.id,
					commercialOwner: this.model1.commercialOwner,
					creator: this.model1.creator,
					documentDate: this.model1.documentDate,
					documentNumber: this.model1.documentNumber,
					procureOrderFormList: this.model1.procureOrderFormList,
					productNumber: this.model1.productNumber,
					remarks: this.model1.remarks
				}
				console.log(form)
				this.$refs.uForm.validate().then(res => {
					this.$apis.procureOrderEdit(form).then(res => {
						if (res.code == 200) {
							this.$u.toast(res.result)
							setTimeout(() => {
								uni.navigateBack()
							}, 1000);
						}
					})
				}).catch(errors => {})
			}
		},


	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.icon {
		border: 1px solid #E0E0E0;
		padding: 8rpx 20rpx;
		border-radius: 10rpx;
	}

	.add {
		background-color: #3247D3;
		padding: 8rpx 20rpx;
		border-radius: 10rpx;
		color: #fff;
	}

	.cl-status {
		color: #6A6A6A;
	}

	.pore {
		position: relative;
	}

	.popBox {
		width: 400rpx;
		height: 100%;
		position: relative;

		.btns {
			position: absolute;
			bottom: 30rpx;
			right: 30rpx;
			left: 30rpx;
			display: flex;
			justify-content: space-around;

			.chongzhi {
				border: 1px solid #E0E0E0;
				padding: 8rpx 30rpx;
				border-radius: 10rpx;
			}

			.confirm {
				padding: 8rpx 30rpx;
				border-radius: 10rpx;
				background-color: #3247D3;
				color: #fff;
			}
		}
	}

	.border-top {
		border-top: 1px solid #F8F8F8;
	}

	.number {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-color: #3247D3;
		color: #fff;
		font-size: 22rpx;
		// padding: 4rpx 10rpx;
		border-radius: 8rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		padding: 30rpx;
		z-index: 999;
	}
</style>